<template>
  <div>
    <div id="change" style="width: 100%; height: 500px" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    this.Graph()
  },
  methods: {
    Graph() {
      const chartDom = document.getElementById('change')
      const myChart = echarts.init(chartDom)
      const option = {
           tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['最高气温', '最低气温']
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            dataView: {readOnly: false},
            magicType: {type: ['line', 'bar']},
            restore: {},
            saveAsImage: {}
        }
    },
        xAxis: {
          type: 'category',
          data: ['2015', '2016', '2017', '2018', '2019', '2020', '2021']
        },
        yAxis: {
          type: 'value',
          scale:true,
          axisLabel: {
            formatter: '{value} 人'
        }
        },
        series: [
            {
          data: [3255, 3222, 3490, 3377, 3541, 3721, 3496],
          type: 'line',
          smooth: true,
          markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            },
        },
        
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style>
</style>
